<template>
  <div style="font-size: 30px; text-align: center">
    {{msg}}
    <hr>
    <!-- 引用 DOM 元素 -->
    请输入用户: <input ref="inputRef" @click="focusInput" type="text" v-model="name">
    请输入年纪: <input ref="inputRefAge" type="number" v-model="age">
<hr>
    <Button @click="applyTest">申请信息测试</Button>
    <hr>
    <ChildComponent ref="childCompRef" />
    <ChildComponenTable :xtm="xtm" @setChildChuanDi="XiaomMingTongXue" ref="XiaomMingTongXue1"></ChildComponenTable>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import ChildComponenTable from './ChildComponenTable.vue'
export default {
  name: 'A',
  computed: {
    xtm() {
      return 19;
    }
  },
  components: {
    ChildComponent,
    ChildComponenTable
  },
  data() {
    return {
      msg: "这个res使用的方法",
      name: '',
      age: ''
    }
  },
  mounted() {
    // 加载页面的时候获取自动获取焦点
    this.$nextTick(()=>{
      this.$refs.inputRefAge.focus();
    })
    //   this.focusInput(); 也可以把手动的变成自动获取焦点的
    this.$refs.XiaomMingTongXue1.$on('setChildChuanDi1', this.XiaomMingTongXue1)
  },
  methods: {
    // 获取输入的焦点 需要手动获取焦点
     focusInput() {
       // 访问 DOM 元素
       this.$refs.inputRef.focus(); // 自动聚焦输入框
     },
    applyTest() {
       // 调用子组件的方法
       this.$refs.childCompRef.apply();
    },
    XiaomMingTongXue(name) {
      console.log("=====name========", name)
    },
    XiaomMingTongXue1(name) {
      console.log("=====name1========", name)
    }
  }
}
</script>

<style>

</style>
